<template>
	<view class="container" >
		<view class="box-bg" >
			<view class="container_nav">
				珈云健身中心
			</view>
			<!-- <uni-nav-bar  title="珈云健身中心"  /> -->
		</view>
		<view class="banner" style="margin-top: 20px;">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" :interval="interval" :autoplay="autoplay" @change="change" :current="swiperDotIndex" >
					<swiper-item class="swiper-box-item" v-for="(item, index) in info"  :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image :src="item" ></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="service">
			<uni-grid class="service-item" :square="false"  :show-border="false":column="4" :highlight="true" @change="service">
				<uni-grid-item v-for="(item, index) in services" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image :src="item.url"></image>
						<text style="font-size:12px ;">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="welfare">
			<image src="../../static/img/goods.png" ></image>
		</view>
		<view class="command">
			<view class="command-title">
					<text style="float: left;">名师推荐</text>
					<text style="float: right;" @click="commandMore">更多 ></text>
			</view>
		
			<view style="display: block;">
				<view class="command-item" v-for="item in teachers" >
					<image :src="item.image" ></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="notice">
				<view style="">
					<scroll-view  height="1vh">
						<swiper class="swiper" circular
						
						:indicator-dots="indicatorDots" 
						:autoplay="autoplay" 
						:interval="interval"
						vertical="true"
						:duration="duration"
							>
							<swiper-item v-for="(item,index) in noticeTitle" height="1vh"  >
								<image src="../../static/img/notice.png" style="float: left;overflow: hidden;"></image>
								<view style="poszxition: relative; left: 1vh;float: left;overflow: hidden;">{{item.title}}</view>
								<view style="position: relative;float: right;overflow: hidden;">{{item.createTime}} ></view>
							</swiper-item>
						</swiper>
					</scroll-view>	
				</view>
				
		</view>
		<view class="show">
			<image src="../../static/img/practice.png"></image>
		</view>
		<view class="info">
			<view class="info-content">
				<text style="float: left;font-size: 2vh;font-weight: 700;height: 2vh;margin: 1vh 0;">联系我们</text>
			</view>
			<view class="info-content">
				<text style="float: left;font-size: 12px;">地址:{{bussinessInfo.address}}</text>
				<image src="../../static/img/map.png" style="float: right;height: 2vh;width: 2vh;"></image>
			</view>
			<view class="info-content">
				<text style="float: left;overflow: hidden;font-size: 12px;">电话:{{bussinessInfo.phone}}</text>
				<image src="../../static/img/telephone.png" style="float: right;overflow: hidden;height: 2vh;width: 2vh;"></image>
			</view>
			<view class="info-content">
				<text>微信客服:{{bussinessInfo.wx}}</text>
				<image  @click="open" src="../../static/img/wx.png" style="float: right;overflow: hidden;height: 2vh;width: 2vh;"></image>
			</view>
			<uni-popup ref="wx" type="message">
				<view class="wx-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view>
						珈云健身中心
					</view>
					<image src="/static/img/wxerweima.jpg"></image>
					<view>
						微信扫码联系客服
					</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
import { getNotice, getNoticeList } from '../../api/notice';
import { getTeacherListPage } from '../../api/teacher';
import { baseUrl } from '../../config';
	export default {
		data() {
			return {
				bussinessInfo:{
					address:"山东省济南市长清区数娱广场b座",
					phone:"13333333333",
					wx:"山东高合"
				},
				info: ['/static/img/1.png','/static/img/2.png','/static/img/3.png'],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				autoplay:true,
				interval:3000,
				services:[
					{
						url:"/static/img/card.png",
						text:"办卡",
						src:"/registCard"
					},
					// {
					// 	url:"/static/img/audition.png",
					// 	text:"试听",
					// 	src:"/audition"
					// },
					{
						url:"/static/img/mall.png",
						text:"商城",
						src:"/mall"
					},
					{
						url:"/static/img/brand.png",
						text:"品牌",
						src:"/brand"
					},
					{
						url:"/static/img/activity.png",
						text:"活动",
						src:"/activity"
					},
				],
				teachers:[
					{
						imgUrl:"/static/img/teacher1.png",
						name:"阿童"
					},
					{
						imgUrl:"/static/img/teacher2.png",
						name:"皮皮"
					},
					{
						imgUrl:"/static/img/teacher2.png",
						name:"小王"
					},
					{
						imgUrl:"/static/img/teacher2.png",
						name:"张老师"
					}
				],
				noticeTitle:[
					{
						title:"模拟测试通知1",
						createDate:"01-01"
					},{
						title:"模拟测试通知2",
						createDate:"01-05"
					}
				],
				indicatorDots:false,
				autoplay:true,
				interval:3000,
				duration:500
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			service(e) {
				let {
					index
				} = e.detail
				console.log(index);
				this.services[index].badge && this.list[index].badge++
				uni.navigateTo({
					url:"/pages/service"+this.services[index].src
				})
			},
					
			moreCommand(){
				console.log("666");
			},
			open(){
				console.log(666);
				this.$refs.wx.open("center")
			},
			commandMore(){
				uni.navigateTo({
					url:'/pages/service/command'
				})
			}
		},
		onLoad(){
			getTeacherListPage(1,4).then(res=>{		
				for (var i = 0; i < res.data.data.records.length; i++) {
					res.data.data.records[i].image=baseUrl+"/common/download?name="+res.data.data.records[i].image
				}
				this.teachers=res.data.data.records
				console.log(res);
			})
			getNoticeList().then(res=>{
				console.log(res);
				this.noticeTitle=res.data.data
			})
		}
	}
</script>

<style>
	body{
		background-color: #F9F9F8;
	}
	.container_nav{
		height: 12vh;
		width: 100%;
		text-align: center;
		line-height: 17vh;
		border-bottom: 0.15vh solid black;
		letter-spacing: 0.1vh;
		font-size: 1.6vh;
		
	}
	.banner{
		width: 90%;
		margin: auto;
	}
	.swiper-box-item image{
		width: 100%;
		height: 19vh;
		border-radius: 2vh;
	}
	.service{
		background-color: #FFFFFF;
		width: 90%;
		/* float: left; */
		/* height: 14vh; */
		margin: 2vh auto;
		
		display: inline-block;
		text-align: center;
		position: relative;
		left: 5%;
	}
	.service image{
		display: block;
		margin: auto;
		width: 5vh;
		height: 5vh;
	}
	.service-item{
		border-radius: 2vh;
	}
	.welfare image{
		width: 90%;
		height: 8vh;
		margin: 2vh auto;
		position: relative;
		left: 5%;
	}
	.command{
		background-color: white;
		/* border: 1px solid red; */
		border-radius: 20px;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.command-title{
		font-weight: 700;
		line-height: 7vh;
		margin: 2vh 0 0 2vh;
		overflow: hidden;
	}
	.command-item{
		display: inline-block;
		text-align: center;
		
	}
	.command-item image{
		width: 9vh;
		height: 9vh;
		border-radius: 50%;
		display: block;
		margin: 1.15vh;
	}
	.notice{
		background-color: white;
		/* border: 1px solid red; */
		border-radius: 1vh;
		width: 90%;
		margin: auto;
		margin-top: 2vh;
		display: block;
		height: 4vh;
		line-height: 4vh;
		overflow: hidden;
	}
	.notice image{
		height: 20px;
		width: 20px;
		position: relative;
		top: 0.5vh;
		
	}
	.notice .swiper{
		margin-left: 10px;
	}
	.show{
		background-color: white;
		/* border: 1px solid red; */
		border-radius: 20px;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.show image{
		width: 100%;
		height: 30vh;
	}
	.info{
		background-color: white;
		/* border: 1px solid red; */
		border-radius: 20px;
		width: 90%;
		margin: auto;
		margin-top: 20px;
	}
	.info-content{
		margin: 2vh;
		line-height: 2vh;
		height: 2vh;
	}
	.info-content text{
		float: left;
		overflow: hidden;
		font-size: 12px;
	}
	.info-content image{
		position: relative;
		top: 0vh;
	}
	.wx-content{
		background-color: white;
		margin: auto;
		text-align: center;
	}
	.wx-content text{
		width: 100%;
	}
	
</style>
